<template>
  <transition enter-active-class="lastenter animated zoomIn">
  <div class="login" :style ="note" v-if="isShow">
    <Form ref="formInline" class="formLogin">
      <p ref="move">登陆</p>
      <FormItem prop="uname" style="width:250px" class="tow">
        <Input type="text" v-model="form.uname" placeholder="请输入账号" clearable>
          <Icon type="md-person" size="18" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem prop="upwd" style="width:250px" class="three" show-message>
        <Input type="password" v-model="form.upwd" @keyup.enter.native="login(form)" placeholder="请输入密码" show-message>
          <Icon type="ios-unlock" size="18" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem class="four">
        <Button
          class="btn"
          :disabled="disabledStatus"
          type="primary"
          @click="handleSubmit"
        >{{btnValue}}</Button>
        <Button type="info" @click="handleCancel">取消</Button>
      </FormItem>
    </Form>
  </div>
  </transition>
</template>

<script>
import { clearInterval, setInterval } from "timers";
export default {
  data() {
    return {
      logincount: 0,
      disabledStatus: false,
      btnValue: "登录",
      btnTimeOver: 60,
      timer: null,
      note: {
        backgroundImage: "url(" + require("../assets/bj1.jpg") + ")",
        backgroundRepeat: "no-repeat"
      },
      form: {
        uname: "",
        upwd: ""
      },
      isShow:false,
    };
  },
  methods: {
    handleSubmit() {
      if (this.logincount < 5) {
        this.$axios({
          url: "/admin/account/login",
          data: this.form,
          method: "POST",
          withCredentials: true
        }).then(res => {
          console.log(res)
          const { status, message } = res.data;
          if (status == 1) {
            this.$Message.error(message);
            this.logincount++;
          } else {
            // sessionStorage.setItem("islogin","logined")
            this.$router.push("/admin/order-list");
          }
        });
      } else {
        // 提示
        this.$Message.error("输入错误密码次数过多，请稍后重试");
        // 禁用按钮
        this.disabledStatus = true;
        // 清空输入框
        this.handleCancel();
        // 倒计时事件
        this.timeoutbtn();
      }
    },
    //回车键登陆
    login(enterKey){
      this.$axios({
        url:"/admin/account/login",
        data:this.form,
        method:"POST",
        withCredentials:true
    }).then(res=>{
        const {status,message}=res.data;
        if(status==1){
            this.$Message.error(message);
        }else{
            this.$router.push("/admin/order-list")
        }
    })
    },
    handleCancel() {
      this.form = {
        uname: "",
        upwd: ""
      };
    },
    timeoutbtn() {
      this.timer = setInterval(() => {
        this.btnTimeOver--;
        this.btnValue = this.btnTimeOver + "s后重试";
        if (this.btnTimeOver == 0) {
          clearInterval(this.timer);
          this.btnTimeOver = 60;
          this.logincount = 0;
          this.disabledStatus = false;
          this.btnValue = "登录";
        }
      }, 1000);
    }
  },
   mounted:function(){
    console.log(this.isShow);
    this.isShow=true

  }
};
</script>

<style scope>
@import "../assets/animate.css";

.login {
  width: 400px;
  height: 210px;
  margin: 100px auto;
  background-color: #fff;
  border-radius: 30px;
  text-align: center;
}
.tow,
.three {
  margin-left: 75px;
}
p {
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  color: #fff;
}
.btn {
  margin-right: 20px;
}
</style>